<template>
  <div class="print-wrapper">
    <div class="header">
      <h3>{{'辉煌口腔上海路分院'}}</h3>
      <div class="sub-title">
        <h4>{{'预付款(储值卡)收费单'}}</h4>
      </div>
    </div>
    <div class="main-content">
      <div class="top">
        <div class="top-item">
          <div class="label">姓名：</div>{{'张三'}}
        </div>
        <div class="top-item">
          <div class="label">病历号：</div>{{'11111111111111'}}
        </div>
      </div>
      <div class="middle">
        <div class="middle-head">
          <div class="item">单号</div>
          <div class="item">交易日期</div>
          <div class="item">交易类型</div>
          <div class="item">充值金额</div>
          <div class="item">支付方式</div>
          <div class="item">馈赠金额</div>
          <div class="item">剩余总金额</div>
        </div>
        <div class="middle-main">
          <div class="middle-content" v-for="i in 1">
            <div class="item">{{'SH20220711'}}</div>
            <div class="item">{{'2022-07-11'}}</div>
            <div class="item">{{'充值'}}</div>
            <div class="item">{{'100'}}</div>
            <div class="item">{{'现金'}}</div>
            <div class="item">{{'10'}}</div>
            <div class="item">{{'110'}}</div>
          </div>
        </div>

        <div class="middle-footer">
          <div class="item">
            <div class="label">备注：</div>{{'充值馈赠10元'}}
          </div>
          <div class="item">
            <div class="label">操作人：</div>{{'李四'}}
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="item">
          <div class="label">诊所电话：</div>{{'091-990-1089'}}
        </div>
        <div class="item">
          <div class="label">打印时间：</div>{{'2022-07-11'}}
        </div>
        <div class="item">
          <div class="label">诊所地址：</div>{{'上海路嘻嘻嘻嘻嘻'}}
        </div>
        <div class="item">
          <div class="label">客户签字：</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'PrintRechargeSheet'
})
</script>

<style lang="scss" scoped>

.print-wrapper .header {
  text-align: center;
  letter-spacing: 2px;
}

.print-wrapper .header h3 {
  font-size: 24px;
  margin-bottom: 0;
}

.print-wrapper .header .sub-title h4 {
  margin: 0;
  margin-top: 10px;
}
.print-wrapper .main-content .top {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #000;
}

.main-content .top .top-item {
  display: flex;
  flex: 1;
}

.main-content .middle {
  min-height: 200px;
}

.main-content .middle .middle-head, .middle-content {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.middle .middle-head .item , .middle-content .item {
  flex: 1;
  padding: 15px 0;
}

.middle .middle-main {
  min-height: 280px;
}

.middle .middle-content {
  font-weight: 400;
}

.middle .middle-footer {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 2px solid #000;
}

.middle .middle-footer .item {
  display: flex;
  flex: 1;
}

.main-content .bottom {
  display: flex;
  flex-wrap: wrap;
}
.main-content .bottom .item {
  width: 50%;
  display: flex;
  align-items: center;
  padding-top: 10px;
}



// .print-wrapper {
//   .header {
//     text-align: center;
//     letter-spacing: 2px;
//     & > h3 {
//       font-size: 24px;
//       margin-bottom: 0;
//     }

//     .sub-title h4{
//       margin: 0;
//       margin-top: 10px;
//     }
//   }

//   .main-content {
//     .top {
//       display: flex;
//       align-items: center;
//       padding-bottom: 10px;
//       border-bottom: 2px solid #000;

//       .top-item {
//         display: flex;
//         flex: 1;
//       }
//     }

//     .middle {
//       .middle-head, .middle-content {
//         display: flex;
//         align-items: center;
//         font-weight: bold;

//         .item {
//           flex: 1;
//           padding: 15px 0;
//         }
//       }

//       .middle-content {
//         font-weight: 400;
//         padding-bottom: 150px;
//       }

//       .middle-footer {
//         display: flex;
//         align-items: center;
//         padding-bottom: 10px;
//         border-bottom: 2px solid #000;
//         .item {
//           display: flex;
//           flex: 1;
//         }
//       }
//     }

//     .bottom {
//       display: flex;
//       flex-wrap: wrap;

//       .item {
//         width: 50%;
//         display: flex;
//         align-items: center;
//         padding-top: 10px;
//       }
//     }
//   }
// }
</style>